<template>
    <div>
    <div>
        <el-dialog
            title="测点信息"
            :visible.sync="dialogVisible"
            width="50%"
            :showClose="false"
            >
            <div>
              <div>
                <template>
                  <el-select  clearable v-model="form.name"  placeholder="测点分组"   size="medium" style="margin-right: 10px;" @change="select">
                    <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="item.value"></el-option>
                  </el-select>
                  <el-input  placeholder="请输入测点名称搜索"
                  suffix-icon="el-icon-search" @keyup.enter.native="changeinput" v-model="input2"  style="width: 200px;height: 32px;" size="medium"></el-input>
                </template>
              </div>
              <div style="margin-top: 10px;">
                <template>
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    :cell-style="{'text-align':'center'}"
                    :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    height="450"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
                    <el-table-column
                      label="数据项标识"
                      prop="itemTag"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="itemName"
                      label="数据项名称"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="itemGroup"
                      label="数据项分组"
                      show-overflow-tooltip>
                      <template #default="{row}">
                        <span>{{ row.itemGroup==='1'?'负荷信息'
                        :row.itemGroup==='0'?'工况遥信'
                        :row.itemGroup==='6'?'电能信息'
                        :row.itemGroup==='8'?'环境信息'
                        :row.itemGroup==='9'?'电能质量'
                        :row.itemGroup==='7'?'电网矢量'
                        :row.itemGroup==='2'?'控制信息'
                        :row.itemGroup==='20'?'水热信息':'其他'}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="dataUnit"
                      label="数据单位"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="dataType"
                      label="数据类型"
                      show-overflow-tooltip>
                      <template #default="{row}">
                      <span>{{ row.dataType==='YC'?'遥测':row.dataType==='YX'?'遥信':'其他' }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
                <div class="fenye">
                  <el-pagination
                      background
                      layout="prev, pager, next"
                      :current-page.sync="pageNo"
                      @current-change="getcedianlist"
                      :page-size="20"
                      :total="total"
                    >
                  </el-pagination>
                </div>
              </div>
            </div>
            <div style="height: 40px;display: flex; justify-content:space-between ;" >
              <span style="display: inline-block;" class="span">
                <template>
                  <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="采集设备:" prop="itemLoop">
                    <el-select v-model="form.itemLoop" clearable filterable height="25" placeholder="请选择采集设备" @change="changeselect"  style="width: 200px;" size="mini" >
                      <el-option class="select" v-for="(item,index) in xlalalists" :key="index" :label="item.text" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  </el-form>
                </template>
              </span>
              <span slot="footer" class="dialog-footer" style="margin-right: 60px;" >
                <el-button  type="primary" @click="submit" size="small">确 定</el-button>
                <el-button  @click="dialogVisible=false" size="small">取 消</el-button>
              </span>
            </div>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import { getsbxialaapi, postxinceapi } from '@/api/ElectricalDistribution/IotTechnology/device'
import { getxialafenzuapi, getcedianlistapi,getItemTypelistapi } from '@/api/ElectricalDistribution/IotTechnology/eventtype'
export default {
  name: 'MaintenanceFeimuban',
  props: {
    row: { type: Object },
    value:{type: String}
  },
  data () {
    return {
      input2: '',
      tableData: [],
      dialogVisible: false,
      xlalalists: [],
      xlalalist: [],
      form: {itemLoop:''},
      number: '',
      val: '',
      mubanlist: [],
      rules: {
        itemLoop: [{ required: true, message: '采集设备必选', trigger: 'blur' }]
      },
      pageNo:0,
      total:0,
    }
  },

  async mounted () {
 
    const ress = await getxialafenzuapi({ dictType: 'MeasurementKind' })
    this.xlalalist = ress.data.list
    this.getcedianlist()
  },

  methods: {
    async getcedianlist (val) {
      const pageNo=this.pageNo?this.pageNo-1:this.pageNo
      const {data:{list,totalCount}} = await getItemTypelistapi({ itemGroup: this.form.name ,pageNo ,pageSize:20,keyword:this.input2})
      this.tableData = list
      this.total=totalCount
    },
    handleSelectionChange (val) {
      this.mubanlist = val.map(ele => ele.itemTag)
    },
    async submit () {
      await this.$refs.form.validate()
      await postxinceapi({ deviceId: this.row.id, iotDeviceId: this.form.itemLoop, itemTag: this.mubanlist })
      this.dialogVisible = false
      this.$message.success('新增成功')
      this.$emit('shuxing')
      this.getcedianlist()
    },
    changeinput () {
      this.getcedianlist()
    },
    select (val) {
      this.val = val
      this.getcedianlist(val)
    },
    changeselect (val) {
      this.number = val
    }
  },
  watch: {
    input2 (val) {
      setTimeout(()=>this.getcedianlist(this.val),500)
    },
    async value(val) {
      if (val) {
        try {
          const res = await getsbxialaapi({ deviceId: val })
          this.xlalalists = res.data.list
        this.form.itemLoop=res.data.list[0].value
        } catch (error) {
          this.xlalalists=[]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  margin-top: 10px !important;
  margin-left: 25px;
}
.fenye{
  text-align: right;
  margin-top: 10px;
}
::v-deep .el-form-item{
  display: flex;
}
</style>
